<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
const data = reactive({
    flag: false,
    timer: undefined
});
onMounted(() => {
    window.addEventListener("scroll", () => {
        let scrollTop = document.documentElement.scrollTop;
        if (scrollTop > 200) {
            data.flag = true;
        } else {
            data.flag = false;
        }

    })
})
const scrollToTop = () => {
    data.timer = setInterval(function () {
        // 获取滚动条距离顶部的高度
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 越滚越慢，设置成负数是为了防止减不到0
        var ispeed = Math.floor(-osTop / 6);
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
        if (osTop <= 0) {
            clearInterval(data.timer);
        }
    }, 30);
    data.flag = false;
}
</script>

<template>
    <div v-show="data.flag" title="返回顶部"
        class="position-fixed right-50px bottom-50px p-15px sm:w-90px sm:h-90px w-64px h-64px rounded-full text-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 cursor-pointer"
        @click="scrollToTop">
        <svg class="u-svg-content fill-white" enable-background="new 0 0 551.13 551.13" viewBox="0 0 551.13 551.13"
            xmlns="http://www.w3.org/2000/svg" id="svg-1d98">
            <path d="m275.565 189.451 223.897 223.897h51.668l-275.565-275.565-275.565 275.565h51.668z"></path>
        </svg>
    </div>
</template>

<style lang="scss"></style>
